<template>
  <div>
    <div class="banner">
      <MyCarousel :bannerList="recommendBanner" :height="200" indicator-position="outside"></MyCarousel>
    </div>
    <white-space :space="20"></white-space>
    <div>推荐有声电台</div>
    <white-space :space="20"></white-space>
    <div class="recommend">
      <div class="item" v-for="(item, index) in recommendList" :key="index">
        <div class="pic">
          <img :src="item.imgurl" alt="">
          <div class="cover">
            <i class="el-icon-video-play"></i>
          </div>
        </div>  
        <div class="bottom">
          <div>{{ item.dissname }}</div>
          <div>{{ item.creator.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner, getRecommendList } from '@/service/music';

export default {
  data() {
    return {
      recommendBanner: [],
      recommendList: [],
    };
  },
  methods: {
    async getBannerData() {
      const res = await getBanner();
      const { code, data } = res || {};
      if (code) return;
      this.recommendBanner = data.radioList.map((item) => {
        return item.picUrl;
      }).concat(data.slider.map((a) => {
        return a.picUrl;
      })) || [];
    },
    async getRecommendListData() {
      const res = await getRecommendList();
      const { code, data } = res || {};
      if (code) return;
      this.recommendList = data.list || [];
    }
  },
  mounted() {
    this.getBannerData();
    this.getRecommendListData();
    const myObserver = new ResizeObserver(entries => {
      console.log(entries);
    });
    const recommend = document.querySelector('.recommend');
    myObserver.observe(recommend);
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 70vw;

}
:deep(.el-carousel) {
  width: 70vw;
  :deep(.el-carousel__container) {
  // overflow: hidden;
  border-radius: 20px;
  // width: 70vw;
  .el-carousel__item {
    border-radius: 20px;
  }
  img {
    // border-radius: 20px;
    // width: 100%;
    height: 100%;
  }
}
}

.recommend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 80px;
  .item {
    width: 150px;
    height: 200px;
    font-size: 12px;
    margin-bottom: 20px;
    .pic {
      position: relative;
      cursor: pointer;
      border-radius: 10px;
      &:hover {
        transform: translateY(-5%);
        .cover {
          display: block;
        }
      }
      img {
        width: 100%;
        border-radius: 10px;
      }
    }
    .cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 150px;
      border-radius: 10px;
      display: none;
      text-align: center;
      line-height: 150px;
      font-size: 40px;
      background-color: rgba(0, 0, 0, .3);
      color: #fff;
      i {
        &:hover {
          color: pink;
        }       
      }
    }
  }
  .pic {
    transition: all 0.2s;
  }
}

</style>
